<!-- components/StatsSection.vue -->
<template>
  <section class="stats-section">
    <el-row :gutter="40" justify="center" align="middle">
      <el-col
        v-for="item in stats"
        :key="item.id"
        :xs="24"
        :sm="12"
        :md="8"
      >
        <div class="stat-card">
          <div class="stat-icon">⭐</div>
          <div class="stat-number">{{ item.number }}</div>
          <div class="stat-label">{{ item.label }}</div>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const stats = ref([
  { id: 1, number: '12',  label: '年咖啡传承' },
  { id: 2, number: '36',  label: '项国际奖项' },
  { id: 3, number: '50+', label: '咖啡师认证' }
])
</script>

<style scoped>
.stats-section {
  overflow: hidden;
  padding: 60px 20px;
  background: linear-gradient(90deg, #fffaf4, #f7f2ec);
}

.stat-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  font-size: 28px;
  margin-bottom: 12px;
  color: #ff8c00;
}

.stat-number {
  font-size: 42px;
  font-weight: bold;
  color: #4a2e18;
  line-height: 1;
}

.stat-label {
  margin-top: 6px;
  font-size: 16px;
  color: #7a5a43;
}
</style>
